<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>
        宿舍列表
    </title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="css/main.css" media="all">
    <script type="text/javascript" src="lib/loading/okLoading.js"></script>
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript"></script>
    <!--script src="https://unpkg.com/vue/dist/vue.js"></script-->


</head>
<body>
<div class="x-nav">
            <span class="layui-breadcrumb">
              <a><cite>首页</cite></a>
              <a><cite>宿舍管理</cite></a>
              <a><cite>宿舍列表</cite></a>
            </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"  href="javascript:location.replace(location.href);" title="刷新"><i class="layui-icon" style="line-height:30px">ဂ</i></a>
</div>
<div class="x-body" id="app">
    <div>
        <span class="tip">选择楼层</span>
        <el-select @change="selectChange" v-model="selectFloor" clearable placeholder="请选择" style="width:20%" ><!--@change="$forceUpdate()"-->
            <el-option v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
            </el-option>
        </el-select>
        <span class="tip" >输入宿舍号</span>
        <el-input
                placeholder="请输入宿舍号"
                v-model="searchMap.dormId"
                clearable style="width:20%">
        </el-input>
        <el-button type="primary" plain @click="search()">查询</el-button>

    </div>
    <xblock>
        <button class="layui-btn layui-btn-danger" @click="delAll()"><i class="layui-icon">&#xe640;</i>批量删除</button>
        <button class="layui-btn" @click="admin_add('添加','communityadd.html','1000','600')"><i class="layui-icon">&#xe640;</i>添加</button>
    </xblock>
    <table class="layui-table">
        <thead>
        <tr>
            <th>
                <input type="checkbox" id="allChecked" :checked="selectIds.length===dormitoryList.length" @click="allChecked">
            </th>
            <th>
                宿舍号
            </th>

            <th>
                剩余电费
            </th>
            <th>
                供电状况
            </th>
            <th>
                剩余水费
            </th>
            <th>
                供水状况
            </th>
            <th>
                入住人数
            </th>
            <th>
                床位数
            </th>
            <th>
                操作
            </th>
        </tr>
        </thead>
        <tbody id="x-img">
        <tr v-for="(dormitory,index) in dormitoryList">
            <td>
                <input type="checkbox" :id="'id'+dormitory.did" :value="dormitory.did" v-model="selectIds">
            </td>
            <td>{{dormitory.did}}</td>
            <td>{{dormitory.elcRemain}}</td>
            <td>{{dormitory.elcStatus}}</td>
            <td>{{dormitory.waterRemain}}</td>
            <td>{{dormitory.waterStatus}}</td>
            <td>{{dormitory.dnum}}</td>
            <td>{{dormitory.bed}}</td>
            <td class="td-manage">
                <!--href="javascript:是表示在触发<a>默认动作时，执行一段JavaScript代码，而 javascript:; 表示什么都不执行，这样点击<a>时就没有任何反应。-->
                <a title="编辑" href="javascript:;" @click="dormitory_edit('编辑','communityadd.html',dormitory.did,'1000','600')"
                   class="ml-5" style="text-decoration:none">
                    <i class="layui-icon">&#xe642;</i>
                </a>
                <!--单个删除-->
                <a title="删除" href="javascript:;" @click="del(dormitory.did)"
                   style="text-decoration:none">
                    <i class="layui-icon">&#xe640;</i>
                </a>
            </td>
        </tr>
        </tbody>
    </table>

    <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :page-size="searchMap.pageSize"
            layout="prev, pager, next,sizes"
            style="text-align: center"
            :page-sizes="[2,5,10]"
            :total="total">
    </el-pagination>
</div>
<script src="/lib/layui/layui.js" charset="utf-8"></script>
<script src="/js/x-layui.js" charset="utf-8"></script>
<!--导入Vue、js脚本-->
<script src="/js/vue.js" charset="utf-8" type="text/javascript"></script>
<!--引入ELementUI组件库-->
<script src="/js/index.js" charset="utf-8"></script>
<!--引入Axios  js脚本-->
<script src="/js/axios.js" charset="utf-8" type="text/javascript"></script>
<!--时间插件包Moment-->
<script src="/js/moment.min.js" charset="utf-8"></script>



<script>

    var app = new Vue({
        el:"#app",
        data:{
            selectIds:[],
            dormitoryList:[],
            selectFloor:null,
            inputDid:null,
            total:10,
            searchMap:{"dormId":null,"floor":null,"pageNum":1,"pageSize":2},
            options: [
                {
                    value: 1,
                    label: '1层'
                },
         {
                value: 2,
                label: '2层'
            }, {
                value: 3,
                label: '3层'
            }, {
                value: 4,
                label: '4层'
            }, {
                value: 5,
                label: '5层'
            },{
                value:6,
                label:'6层'
            }],
            value: ''


        },
        methods:{
            //全选、全不选方法
            allChecked:function() {
                if (this.selectIds.length === this.dormitoryList.length) {
                    // 全不选
                    this.selectIds = [];

                } else {
                    this.selectIds = [];
                    // 全选
                    this.dormitoryList.forEach( (item) =>{
                        this.selectIds.push(item.did); // 与checkbox的value统一
                    })
                }
            },

            del(id){
                this.$confirm('确定删除该宿舍信息?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.selectIds.push(id);
                    axios.post("/dormitory/del",this.selectIds).then((res)=>{
                        if(res.data.flag){
                            this.$message({
                                type: 'success',
                                message: '删除成功!'});
                        }
                        this.selectIds=[];
                        this.searchMap.pageNum=1;
                        this.search();
                    });



                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            delAll(){
                this.$confirm('确定删除已选择的宿舍信息?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {

                    axios.post("/dormitory/del",this.selectIds).then((res)=>{
                        if(res.data.flag){
                            this.$message({
                                type: 'success',
                                message: '删除成功!'});
                        }

                    });
                    this.selectIds=[];
                    this.searchMap.pageNum=1;
                    this.search();


                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },

            handleSizeChange(pageSize){
                this.searchMap.pageSize= pageSize;
                this.search();
            },
            handleCurrentChange(pageNum){
                this.searchMap.pageNum=pageNum;
                this.search();

            },


            //分页查询宿舍列表
            search(){
                axios.post("/dormitory/search",this.searchMap).then((res)=>{
                    app.dormitoryList = res.data.data;
                    app.total = res.data.total;
                });
            },

            selectChange(){
                if(this.selectFloor==null||this.selectFloor.length==0)
                    this.searchMap.floor=0;
                else
                    this.searchMap.floor=this.selectFloor;
                },

            /*添加*/
            admin_add(title,url,w,h){
                this.x_admin_show(title,url,w,h);
            },
            //全选&全不选方法
            allChecked: function () {
                if (this.selectIds.length === this.dormitoryList.length) {
                    // 全不选
                    this.selectIds = [];

                } else {
                    this.selectIds = [];
                    // 全选
                    this.dormitoryList.forEach((item) =>{
                        this.selectIds.push(item.did); // 与checkbox的value统一
                    })
                }
            },

            //编辑
            dormitory_edit (title,url,id,w,h) {
                url = url+"?did="+id;
                x_admin_show(title,url,w,h);
            },


            /*弹出层*/
            /*
                参数解释：
                title	标题
                url		请求的url
                id		需要操作的数据id
                w		弹出层宽度（缺省调默认值）
                h		弹出层高度（缺省调默认值）
            */
            x_admin_show(title,url,w,h){
                if (title == null || title == '') {
                    title=false;
                };
                if (url == null || url == '') {
                    url="404.html";
                };
                if (w == null || w == '') {
                    w=800;
                };
                if (h == null || h == '') {
                    h=($(window).height() - 50);
                };

                layer.open({
                    type: 2,
                    area: [w+'px', h +'px'],
                    fix: false, //不固定
                    maxmin: true,
                    shadeClose: true,
                    shade:0.4,
                    title: title,
                    content: url,
                    cancel:function(index,layero){
                        app.search();
                    }
                });
            },

            /*关闭弹出框口*/
            x_admin_close(){
                var index = parent.layer.getFrameIndex(window.name);
                parent.layer.close(index);
            }


        },
        created:function () {//Vue生命周期方法，加载页面时会执行该方法
            layui.use(['laydate','element','laypage','layer'], function(){
                $ = layui.jquery;//jquery
                layer = layui.layer;//弹出层
                okLoading.close($);
                layer.ready(function(){ //为了layer.ext.js加载完毕再执行
                    layer.photos({
                        photos: '#x-img'
                    });
                });
            });
            //初始页面获取小区列表信息
            this.search();
        }
    });

</script>

</body>
</html>